<template>
  <div class="view-photo">
    <div class="img-bg" v-show="show" @click="toggle">
      <div class="header">
        <span class="title">{{ title }}</span>
      </div>
      <div class="content">
        <img :src="src" />
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
@Component
export default class ViewPhoto extends Tools {
  @Prop()
  private title!: string;
  @Prop()
  private src!: string;
  @Prop()
  private show!: boolean;
  private toggle() {
    // Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead,
    // 由于子组件修改了父组件的值，所以通过$emit()进行修改 use a data or computed property based on the prop's value. Prop being mutated: "show"
    this.$emit("update:show", !this.show);
  }
}
</script>
<style lang="stylus" scoped>
.view-photo {
  user-select: none
  .img-bg {
    background-color: rgba(0, 0, 0, 0.7)
    opacity: 1
    position: fixed // 平铺全屏,使用position:fixed
    top: 0
    bottom: 0
    left: 0
    right: 0
    z-index: 1000
  }
  .header {
    position: absolute
    top: 60px
    width: 100vw
    height: 70px
    background: rgba(0, 0, 0, 0.7)
    display: flex
    align-items: center
    transform: translate3d(0, -70px, 0)
    transition: all 0.3s ease-out
    .title {
      margin-left: 60px
      font-size: 20px
      font-weight: 600
      color: #fff
      ellipsis()
    }
  }
  .content {
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    img {
      max-width: calc(100% - 80px)
      max-height: calc(100% - 80px)
    }
  }
  .footer {
    position: absolute
    bottom: 0
    width: 100vw
    height: 70px
    background: rgba(0, 0, 0, 0.7)
    display: flex
    align-items: center
    visibility: hidden
  }
}
</style>
